<template>
  <RefComponentChildren ref="childRef"/>
</template>

<script>
import {defineComponent} from 'vue';
import RefComponentChildren from '@/components/RefComponentChildren.vue';

export default defineComponent({
  name: 'RefComponent',
  components: {RefComponentChildren},
  beforeMount() {
    console.log('beforeMount', this.$refs.childRef); // undefined
  },
  mounted() {
    // 分别试试注释与不注释子组件中expose，不注释expose的输出如下
    console.log('mounted', this.$refs.childRef); // {exposeMessage: "暴露属性", exposeMethod: …}
    this.$refs.childRef.exposeMethod(); // 暴露方法
    this.$refs.childRef.method(); // this.$refs.childRef.method is not a function
  }
});
</script>

<style scoped>

</style>